<template>
  <div class="bgImg message">
    <div class="body">
      <div class="wenzi">
        <h1>留言板</h1>
        <i class="iconfont icon-xian-xuxian"></i>
        <span>Message Board</span>
      </div>

      <div class="body-content">
        <!-- 念两句诗 -->
        <div class="content-poetry">
          <h2 class="py-top">念两句诗</h2>
          <h2>{{poetry.verse}}</h2>
          <p>{{poetry.title}}</p>
        </div>
        <!-- 评论 -->
        <div class="content-mess">
          <div class="cmes-top">
            <!-- 总条数 -->
            <div class="cmes-title">
              <p>Comments</p>
              <i class="iconfont icon-xian-xuxian"></i>
              <span>{{message.length}}条评论</span>
            </div>
            <div>
              <span v-if="iszhankai" @click="shouqi"><i class="iconfont icon-Group-"></i> 收起回复</span>
              <span  v-else @click="zhankai"><i class="iconfont icon-Group-1">展开回复</i></span>
            </div>
          </div>

          <div class="cmes-content">
            <!-- 父级评论 -->

            <div
              v-for="(mesItem,mesIndex) in message.slice((pagenum-1)*pagesize,pagenum*pagesize)"
              :key="mesIndex"
              class="cmesc-child"
              @mouseenter="hoverIndex = mesIndex"
              @mouseleave="hoverIndex = -1"
              >
              <el-divider></el-divider>
              <div class="cmesc-user">
                <!-- 头像 -->
                <!-- <img :src="'data:image/jpeg;base64,'+mesItem.avatar" alt="" class="cmesc-avatar"> -->
                <img :src="mesItem.avatar" alt="" class="cmesc-avatar">
                <!-- 用户信息 -->
                <div>
                  <div class="cmesc-name">
                    <span v-if="mesItem.userType=='管理员'" class="cmesc-blogger">博主</span>
                    <h3 class="cmesc-nickname">{{mesItem.nickname}}</h3>
                    <span class="cmesc-rank">LV{{mesItem.rank}}</span>
                  </div>
                  <span class="cmesc-time" onload="time()">{{mesItem.time}}</span>
                </div>
                <!-- <div class="cmesc-caidan"> -->

                  <!-- 回复按钮 -->
                  <span
                    class="cmesc-huifu"
                    :class="{'link-item-hover':mesIndex==hoverIndex}"
                    @click="reply(mesItem.mes_id,mesIndex)">回复</span>
                <!-- </div> -->

              </div>
              <!-- 评论内容 -->
              <!-- <el-tooltip content="Top center"  placement="top" effect="light" @click="alert('删除')"> -->
                <!-- <el-button>Light</el-button> -->
                <p class="cmesc-content">{{mesItem.content}}</p>
              <!-- </el-tooltip> -->

              <!-- 点赞 -->
              <div class="cmesc-praise">
                <span>{{mesItem.praiseCount}}</span>
                <el-button type="text" class="iconfont icon-aixin_shixin" :class="mesItem.isPraise==null?'praise-gray':'praise-red'" @click="getPraise(mesItem)" preventReClick></el-button>
                <!-- <i class="iconfont icon-aixin_shixin praise-gray" v-show="mesItem.praiseType==0"></i>
                <i class="iconfont icon-aixin_shixin praise-red" v-show="mesItem.praiseType==1"></i> -->
              </div>
              <!-- 菜单 -->
              <el-dropdown v-if="isShow && user_id==mesItem.from_uid" trigger="click"  @command="delReview(1,mesItem.from_uid,mesItem.mes_id)" class="cmesc-caidan">
                <i class="iconfont icon-caidan cmesc-icon-caidan"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- <p></p> -->
              <!-- 下划线 -->
              <!-- 父级回复 -->
              <span v-if="replyShow==mesItem.mes_id" @click="cancelReply" class="cmesc-cancel">取消回复</span>
              <comment grade = "1" :toUid = 'mesItem.mes_id' v-if="replyShow==mesItem.mes_id"></comment>
                <!-- 子级回复部分 -->
                <div class="cmesc-reply">
                  <!-- <el-divider v-if="reItem.to_uids == mesItem.mes_id"></el-divider> -->

                  <div
                    v-for="(reItem,reIndex) in mesItem.children.slice(0,len)"
                    :key="reIndex"
                    @mouseenter="hoverReIndex = reIndex"
                    @mouseleave="hoverReIndex = -1"
                    class="StopBubbling">
                    <el-divider></el-divider>
                    <div>
                        <!-- v-if="reItem.to_uids == mesItem.mes_id" -->
                      <!-- <span>{{reItem.content}}</span> -->
                      <div class="cmesc-user" @mouseenter="isShowReply=true" @mouseleave="isShowReply=false">
                        <!-- 子级头像 -->
                        <!-- <img :src="'data:image/jpeg;base64,'+reItem.avatar" alt="" class="cmesc-reply-avatar"> -->
                        <img :src="reItem.avatar" alt="" class="cmesc-reply-avatar">
                        <!-- 子级用户信息 -->
                        <div>
                          <div class="cmesc-name">
                            <span v-if="reItem.userType=='管理员'" class="cmesc-blogger">博主</span>
                            <h3 class="cmesc-nickname">{{reItem.nickname}}</h3>
                            <span class="cmesc-rank">LV{{reItem.rank}}</span>
                          </div>
                          <span class="cmesc-time" onload="time()">{{reItem.time}}</span>
                        </div>
                        <!-- 子级回复按钮 -->
                        <div class="cmesc-caidan">
                          <span
                            class="cmesc-zihuifu"
                            :class="{'link-item-hover':reIndex==hoverReIndex}"
                            @click="reply(reItem.reId,mesIndex)">回复</span>
                        </div>
                      </div>
                      <!-- 子级评论内容 -->
                      <p class="cmesc-content">
                        <span class="cmesc-ante" v-if="reItem.from_childId==null">@{{mesItem.nickname}}</span>
                        <span class="cmesc-ziaite" v-else >@{{reItem.f_cNickName}}</span>
                        {{reItem.repContent}}</p>
                      <el-dropdown v-if="isShow && user_id==reItem.from_userId" trigger="click"  @command="delReview(2,reItem.from_userId,reItem.reId)" class="cmesc-caidan">
                        <i class="iconfont icon-caidan cmesc-icon-zicaidan"></i>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item>
                            删除
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>

                      <!-- <div class="cmesc-praise" @click="getPraise(reItem)">
                        <span>{{reItem.praiseCount}}</span>
                        <i class="iconfont icon-aixin_shixin praise-gray" v-show="reItem.praiseType==0"></i>
                        <i class="iconfont icon-aixin_shixin praise-red" v-show="reItem.praiseType==1"></i>
                      </div> -->
                      <span v-if="replyShow==reItem.reId" @click="cancelReply" class="cmesc-cancel">取消回复</span>
                      <comment grade = "2"  :fromChildId='reItem.reId' :fromChildName = 'reItem.nickname' :toUid = 'mesItem.mes_id' v-if="replyShow==reItem.reId"></comment>
                    </div>

                  </div>
                  <!-- 点击获取更多数据 -->
                  <el-divider></el-divider>
                  <div class="fd-previous">
                    <el-button type="text" v-if="len<mesItem.children.length" @click="more">Previous</el-button>
                    <span v-else-if="mesItem.children.length==0"><i class="iconfont icon-meiyoupinglun"></i>还没有回复，快来留言回复吧</span>
                  </div>
                </div>
              <!-- <span v-if="replyShow==mesIndex" @click="cancelReply" class="cmesc-cancel">取消回复</span>
              <comment :toUid = 'mesItem.mes_id' v-if="replyShow==mesIndex"></comment> -->

            </div>
          </div>

          <div class="cmes-block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagenum"
              :page-sizes="[5, 10, 50, 100]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="message.length">
            </el-pagination>
          </div>
          <comment v-if="replyShow==-1" ></comment>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import comment from './comments.vue';
export default {
  inject:['reload'],//注入App里的reload方法
  components:{
    comment
  },
  data(){
    return {
      poetry:{
        "title":"【宋代】周紫芝《卜算子·席上送王彦猷》",
        "verse":"江北江南几度秋，梦里朱颜换"
      },
      message:[],
      len:2,
      replyMessage:[],
      // currentPage4: 1,
      pagenum: 1,
      pagesize: 5,
      rank:2,
      active:0,
      flag:false,
      isShowReply:false,
      replyShow:-1,
      replyMes:{},
      hoverIndex: -1, // 菜单hover索引
      hoverReIndex: -1, // 菜单hover索引
      activeLinkId: 0, // 当前激活的菜单id
      isShow:"",
      user_id:"",
      praiseCount:0,
      iszhankai:true,
    }
  },
  mounted(){
    this.isShow = this.$store.getters.getShow;
    if(this.isShow){
      this.user_id = this.$store.getters.getUser.user_id;
      //console.log(this.user_id);
    }else{
        //console.log(this.isShow);
    }
    this.getMessage(this.user_id);
  },
  methods:{
    // 获取评论
    async getMessage(user_id){
      // this.message= this.replyMessage = [];
      // //console.log("评论");
      // const {data:res} = await this.$http.get("getMes");
      // let variate = user_id;
      let topicType = "留言"
      let id = "0"
      // const {data:res} = await this.$http.post("getCommentary",{topicType,id});
      const {data:res} = await this.$http.post("getCommentary",{user_id,topicType,id});
      console.log(res);
      // //console.log("---------------");
      if(res.status != 200){
        this.$message.error('获取评论数据失败');
      }else{
        let arr = res.message;
        // this.fileType.time(arr);
        // this.message = res.message;
        for(let i in arr){
          let to_uids = arr[i].mes_id;
           const {data:replyRes} = await this.$http.post("getReplyCommentary",{to_uids});
          //  let replyArr = replyRes.message
          //  for(let n in replyArr){
          //    const {data:replyRes} = await this.$http.post("getReplyCommentary",{to_uids});
          //  }
           arr[i].children = replyRes.message;
           this.fileType.time(replyRes.message);
        }
        // //console.log(arr);
        this.message = arr;
        // this.reload();
      }

    },
    more(){
      this.len += 3;
    },
    shouqi(){
      this.len = 0;
      this.iszhankai = !this.iszhankai;
    },
    zhankai(){
      this.len = 3;
      this.iszhankai = !this.iszhankai;
    },
    // 回复
    reply(id,index){
      // this.replyShow = index;
      this.replyShow = id;
      let replyMes = this.replyMes;
      //console.log(id);
      replyMes.to_uids = id;
    },
    cancelReply(){
      this.replyShow = -1;
    },
    // 点赞
    async getPraise(item){
      var isLogin = this.$store.getters.getShow;
      // //console.log(isLogin);
      // //console.log(this.message);
      if(isLogin==false){
        this.$message('叮叮，要先登录才能点赞哦');
        this.$router.push('/login');
      }else{
        // this.praiseCount++;
        console.log(item);
        // let mes_id = item.mes_id;
        // let praiseType = item.praiseType;
        // let praiseCount = item.praiseCount;
        this.praisemeMes(item);
        let mesObj = {};
        mesObj.mes_id = item.mes_id;
        mesObj.praiseType = item.isPraise;
        mesObj.praiseCount = item.praiseCount;
        // //console.log(mesObj);
        mesObj = JSON.stringify(mesObj)
        // if(this.praiseCount>=1 && this.praiseCount<5){
          // 第一步：更改数据表里面praise的true或者false
          const {data:updateRes} = await this.$http.post("updateMesPraise",{mesObj});
          if(updateRes.status != 200){
            this.$message.error('更新数据失败');
          }else{
            this.$message({
              message: '操作成功',
              type: 'success'
            });
              //console.log(item);
              // this.praisemeMes(item);
          }
        // }else if(this.praiseCount==5){
        //   this.$message({
        //     message: '警报警报，不要一直点wo',
        //     type: 'warning'
        //   });
        // }else {
        //   this.$message({
        //     message: '不要一直点哦，快去看看其他内容吧',
        //     type: 'warning'
        //   });
        // }
        // this.getMessage();
        this.getMessage(this.user_id);
      }
    },
    // 添加点赞信息到praiseme表
    async praisemeMes(item){
      console.log(item);
      // 首先查询表中是否有该条数据，无则加，有则删
      let mes_id = item.mes_id;
      let user_id = this.user_id;
      const {data:getMesres} = await this.$http.post("selPraisemeMessage",{mes_id,user_id});
      console.log(getMesres);
      if(getMesres.status != 200){
        this.$message.error('查询数据失败');
      }else{
        let PMArr = getMesres.message;
        let newPrase = {};
        newPrase.Mmes_id = item.mes_id;
        newPrase.praise_userId = this.user_id;
        newPrase.praiseme_time = this.fileType.changeDate(new Date());
        newPrase = JSON.stringify(newPrase);
        console.log(newPrase);
        if(PMArr.length==0){
          console.log("没有该数据");
          if(item.isPraise==null){
            console.log("添加");
            this.addPraise(newPrase);
          }else{
            console.log("删除");
            this.delPraise(item.mes_id,this.user_id)
          }
        }else{
          console.log("有该数据");
          if(item.isPraise==null){
            console.log("修改");
            this.editPraise(newPrase);
          }else{
            console.log("删除");
            this.delPraise(item.mes_id,this.user_id)
          }
        }
      }
    },
    // 添加
    async addPraise(newPrase){
      const {data:res} = await this.$http.post("insertPraiseme",{newPrase});
      console.log(res);
    },
    // 修改
    async editPraise(newPrase){
      const {data:res} = await this.$http.post("updatePraiseme",{newPrase});
      console.log(res);
    },
    // 删除
    async delPraise(mes_id,user_id){
      console.log(mes_id,user_id);
      const {data:res} = await this.$http.post("delPraiseme",{mes_id,user_id});
      console.log(res);
    },
    // 删除评论
    delReview(type,from_userId,mesId){
      // alert("双击删除");
      //console.log(from_userId);
      let isShow = this.$store.getters.getShow;
      if(isShow){
        const user_id = this.$store.getters.getUser.user_id;
        //console.log("当前登录的id");
        //console.log(user_id);
        if(user_id==from_userId){
          // alert("删除了");
          this.open(type,mesId);
        }else{
          //console.log("不是你写的不能删除");
        }
      }else{
        //console.log("你还没有登录哦");
      }
    },
    open(type,mesId) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.toDelReview(type,mesId);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 删除评论
    async toDelReview(type,mesId){
      //console.log("删除评论");
      //console.log(type);
      //console.log(mesId);

      const {data:res} = await this.$http.post("deleteReview",{type,mesId});
      if(res.status != 200){
        this.$message.error('获取评论数据失败');
      }else{
        //console.log(res);
        this.getMessage();
      }
    },
    // 设置每页显示几条数据
    handleSizeChange: function(newsize) {
      this.pagesize = newsize;
    },
    // 跳转到第几页
    handleCurrentChange: function(current) {
      this.pagenum = current;
    },
    // 阻止事件冒泡
    stopBubble(e) {
      //如果提供了事件对象，则这是一个非IE浏览器
      if(e && e.stopPropagation){
        //因此它支持W3C的stopPropagation()方法
        e.stopPropagation();
      }else {
        //否则，我们需要使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true;
      }
    }

  }
}
</script>
<style scoped>
@import url('./mess');

</style>
